/*
  前端怎么和后端请求 => 前端怎么拿到后端的数据

  数据是后端通过接口提供的
  前端就可以通过接口拿到数据 => 独立的js库   axios

*/

import router from '@/router'
import axios from 'axios'
import { Message } from 'element-ui' // Message 就是 this.$message

const service = axios.create({
  baseURL: 'https://api-hmzs.itheima.net/v1',
  timeout: 5000 // request timeout
})

// 请求拦截器(统一添加请求头)
service.interceptors.request.use(
  config => {
    // 添加token
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器(!!!)
service.interceptors.response.use(
  // 响应成功的拦截器
  response => {
    // 不用res.data.data.xx   直接res.data.xx
    return response.data
  },
  // 响应失败的拦截器 => 401, 500
  error => {
    console.dir(error)

    // 判断当前这次失败 是因为 token过期了
    if (error.response.status === 401) {
      // token过期了 而不是其他的问题
      // 以前在vue文件中this指向的是组件本身
      // this.$router.push('/login')
      // this.$message.error('登录已过期, 请重新登录')

      // 不是在vue文件中了 而是一个普通js文件
      router.push('/login')
      Message.error('登录已过期, 请重新登录')
    }

    return Promise.reject(error)
  }
)

// 默认导出service  因为别的地方发请求需要用到这个service(升级版的axios)
export default service

// service({
//   url: '/park/login',
//   method: 'POST',
//   data: {
//     username: 'admin',
//     password: 'admin123'
//   }
// }).then((res) => {
//   console.log(res.data.token)
// })
